<template>
    <div class="correct-homework">
         <div class="course-tabs">
            <li v-for="(item,index) in tabsList" :key="index" @click="handleTabsClick(item, index)" :class="currentIndex === index ? 'active' : ''">
                {{ item.name }}
            </li>
        </div>
        <div class="homework-box">
            <div class="search-input">
                <a-form-model :model="formData">
                    <a-form-model-item label="选择学校">
                        <a-select v-model="formData.school_name" style="width: 200px" placeholder="请选择学校" @change="handleSchoolChange">
                            <a-select-option v-for="item in schoolData" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="选择班级">
                        <a-select v-model="formData.class_id" style="width: 200px" placeholder="请选择">
                            <a-select-option v-for="item in classData" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="作品名">
                        <a-input v-model="formData.name" placeholder="请输入作品名" />
                    </a-form-model-item>
                    <!-- <a-form-model-item label="作品状态">
                        <a-select v-model="formData.workStatus" style="width: 200px" placeholder="请选择">
                            <a-select-option value="1">已评</a-select-option>
                            <a-select-option value="2">未评</a-select-option>
                        </a-select>
                    </a-form-model-item> -->
                    <a-form-model-item label="评分状态">
                        <a-select v-model="formData.score_status" style="width: 200px" placeholder="请选择">
                            <a-select-option value="1">已评分</a-select-option>
                            <a-select-option value="2">未评分</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <!-- <a-form-model-item label="上课记录ID">
                        <a-input v-model="formData.id" placeholder="请输入记录ID" />
                    </a-form-model-item> -->
                    <a-form-model-item label="更新时间">
                        <a-range-picker
                            v-model="rangeDate"
                            :show-time="{ format: 'HH:mm' }"
                            format="YYYY-MM-DD HH:mm"
                            :placeholder="['开始时间', '结束时间']"
                            @change="onChange"
                            @ok="onOk"
                        />
                    </a-form-model-item>
                    <a-form-model-item>
                        <a-button style="margin-right:20px" @click="handleReset">重置</a-button>
                        <a-button type="primary" style="margin-right:40px" @click="handleSearch">搜索</a-button>
                        <a-button type="danger" @click="handleExport">导出明细</a-button>
                    </a-form-model-item>
                </a-form-model>
            </div>
            <div class="table-box">
                <a-table :columns="columns" :data-source="tableData" :rowKey="(row, index) => {return index;}" bordered>
                    <a slot="name"></a>
                    <template slot="operation" slot-scope="text, record">
                        <a class="actionBtn" @click="() => toHomework(record)">查看作品</a>
                    </template>
                </a-table>
            </div>
        </div>
    </div>
</template>
<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '作品名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '用户ID',
    dataIndex: 'user_id',
    key: 'user_id',
  },
  {
    title: '上课记录ID',
    key: 'edu_log_id',
    dataIndex: 'edu_log_id',
  },
  {
    title: '学生姓名',
    key: 'student_name',
    dataIndex: 'student_name',
  },
  {
    title: '班级名称',
    key: 'class_name',
    dataIndex: 'class_name',
  },
  {
    title: '教师评分',
    key: 'score',
    dataIndex: 'score',
  },
  {
    title: '学生自评',
    key: 'comment',
    dataIndex: 'comment',
  },
  {
    title: '更新时间',
    key: 'update_time_text',
    dataIndex: 'update_time_text',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
];

export default{
    data() {
        return {
            currentIndex: 0,
            tabsList: [
                {
                    name: '我的作品',
                    type: 'mine'
                },
                {
                    name: '同学作品',
                    type: 'classmate'
                }
            ],
            formData: {
                class_id: '',
                name: '',
                score_status: '',
                id: '',
                update_time: ''
            },
            tableData: [],
            columns,
            classData: [],
            schoolData: [],
            rangeDate: [],
        }
    },
    computed: {
        imageUrl() {
            return process.env.VUE_APP_IMAGE_URL; // 自动匹配当前环境
        }
    },
    mounted() {
        this.getSchoolList();
        this.getStudentHomeworkList();
    },
    methods: {
        handleTabsClick(item, index) {
            this.currentIndex = index;
            if (item.type === 'mine') {
                this.getStudentHomeworkList();
            } else {
                this.getClassmateHomeworkList();
            }
        },
        async getSchoolList() {
            const res = await this.$request.get('api/school/index');
            if (res.code === 1) {
                // console.log(res.data, 'res.datares.data');
                this.schoolData = res.data || [];
            }
        },
        handleSchoolChange(value) {
            console.log(`selected ${value}`);
            this.getClassList(value);
        },
        async getClassList() {
            const userinfo = JSON.parse(localStorage.getItem('userinfo'));
            const id = userinfo.school_id || 0;
            const res = await this.$request.get(`api/school/banji_list?school_id=${id}`);
            if (res.code === 1) {
                // console.log(res.data, 'res.datares.data');
                this.classData = res.data || [];
            }
        },
        async getStudentHomeworkList() {
            const res = await this.$request.get(`api/edu/student_homework_list?class_id=${this.formData.class_id}&name=${this.formData.name}&score_status=${this.formData.score_status}&id=${this.formData.id}&update_time=${this.formData.update_time}`);
            if (res.code == 1) {
                this.tableData = res.data.data || [];
            }
        },
        async getClassmateHomeworkList() {
            const res = await this.$request.get(`api/edu/classmate_homework_list?class_id=${this.formData.class_id}&name=${this.formData.name}&score_status=${this.formData.score_status}&id=${this.formData.id}&update_time=${this.formData.update_time}`);
            if (res.code == 1) {
                this.tableData = res.data.data || [];
            }
        },
        onChange(value, dateString) {
            console.log('Selected Time: ', value);
            console.log('Formatted Selected Time: ', dateString);
            this.formData.update_time = dateString.join(' - ');
        },
        onOk(value) {
            console.log('onOk: ', value);
        },
        toHomework(record) {
            // console.log(record, 'recordrecordrecord');
            this.$router.push({
                name: 'myHomework',
                query: {
                    workObj: JSON.stringify(record),
                    source: 'student'
                }
            })
        },
        handleReset() {
            // this.form.resetFields();
            this.rangeDate = [];
            this.formData = {
                class_id: '',
                name: '',
                score_status: '',
                id: '',
                update_time: ''
            }
            this.getStudentHomeworkList();
        },
        handleSearch() {
            this.getStudentHomeworkList();
        },
        handleExport() {
            this.$request.post(`api/edu/student_homework_export?class_id=${this.formData.class_id}&name=${this.formData.name}&score_status=${this.formData.score_status}&id=${this.formData.id}&update_time=${this.formData.update_time}`).then(res => {
                if (res.code == 1) {
                    const link = document.createElement('a');
                    link.href = res.data.filePath;
                    link.download = res.data.fileName;
                    link.click();
                } else {
                    this.$message.error(res.msg)
                }
            })
            // console.log('导出');
        }
    },
}
</script>
<style lang="less" scoped>
.correct-homework{
    width: 100%;
    .course-tabs{
        display: flex;
        // margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #E9E6F2;
        cursor: pointer;
        li{
            list-style: none;
            width: 170px;
            height: 56px;
            background: #EDF5FF;
            border-radius: 8px;
            border: 1px solid #78A9FF;
            line-height: 56px;
            font-weight: 400;
            font-size: 17px;
            color: #0080FF;
            text-align: center;
            margin-right: 10px;
            &.active{
                background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
                color: #FFFFFF;
            }
        }
    }
    .search-input{
        // height: 135px;
        background: #FFFFFF;
        box-shadow: 0px 2px 4px 0px rgba(0,69,207,0.08);
        border-radius: 12px;
        padding: 30px;
        margin-top: 30px;
    }
    .actionBtn{
        width: 94px;
        height: 32px;
        line-height: 32px;
        background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
        border-radius: 6px;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        display: block;
        text-align: center;
    }
    /deep/ .ant-form{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    /deep/ .ant-form-item{
        display: flex;
    }
    .table-box{
        margin-top: 30px;
    }
}
</style>